<template>
	<view class="u-padding-top-30">
		<view class="mdx-center-min infoBox u-flex">
			<view>
				<u-avatar size="120" mode='square' :src="userInfo.headimgurl"></u-avatar>
			</view>
			<view class="u-margin-left-10">
				<view class="username">{{userInfo.nickname||'(未命名游客)'}}</view>
				<view class="teamname">团队：{{userInfo.team_name||'未加入团队'}}</view>
			</view>
		</view>
		<view class="mdx-center-min u-m-t-30 infoBox">
			<view class="actTitless">
				申请列表
			</view>
			<view class="u-m-t-25 u-flex" @click="$mHelper.to('/pages/my/myTeam/applyList/applyList')">
				<view class="u-flex-1 u-flex" style="overflow: hidden;">
					<view class="u-margin-right-10 " v-for="(item,index) in applyList" :key='index'>
						<u-avatar size="80" mode='square' :src="item.headimgurl"></u-avatar>
					</view>
					<view v-if="applyList.length<1">
						（无）
					</view>
				</view>
				<view>
					<u-icon size="20" name="/static/images/rightIcon.png"></u-icon>
				</view>
			</view>
		</view>
		<view class="mdx-center-min u-m-t-30 infoBox">
			<view class="actTitless">
				团员列表
			</view>
			<view class="teamList u-flex" v-for="(item,index) in memberList" :key='index' v-if="userInfo.id!=item.u_id">
				<view>
					<u-avatar size="120" mode='square' :src="item.headimgurl"></u-avatar>
				</view>
				<view class="u-margin-left-10 u-flex-1">
					<view class="username">{{item.nickname}}</view>
				</view>
				<view class="btns block" v-if="item.static==1" @click="laheiOreSf(item,1)">
					拉黑
				</view>
				<view class="btns release" v-else @click="laheiOreSf(item,2)">
					释放
				</view>
			</view>
			<view v-if="memberList.length<1" style="padding-top: 100rpx;" class="u-p-b-100">
				<u-empty icon-size="280" text="暂无数据~" src="/static/images/noneList.png"></u-empty>
			</view>
		</view>
		<view class="u-padding-20" v-if="memberList.length">
			<u-loadmore :status="status" />
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				src: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic3.zhimg.com%2F50%2Fv2-9bfa8815c6caa8818a0ff955e6d4154a_hd.jpg&refer=http%3A%2F%2Fpic3.zhimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1624692507&t=aacf1cb279ea78b34a914fa7ee9264c2',
				applyList: [], //申请列表
				memberList: [],

				page: 1,
				pageSize: 10,
				status: 'loadmore',
			}
		},
		computed: {
			userInfo() {
				return this.$store.getters['userinfo']
			}
		},
		onShow() {
			this.getApplyList(); //获取申请列表
			this.getMemberList(); //获取成员列表
		},
		onReachBottom() {
			if (this.status != 'nomore') {
				this.status = 'loading';
				setTimeout(() => {
					this.getMemberList();
				}, 500);
			}
		},
		onPullDownRefresh() {
			setTimeout(() => {
				this.page = 1;
				this.list = [];
				this.status = 'loadmore';
				this.getApplyList();
				this.getMemberList();
			}, 800);
		},
		methods: {
			//获取申请列表
			getApplyList() {
				this.$http.get('api/Tmy/teaminfod', {
					page: 1,
					limit: 5
				}).then(res => {
					if (res.code == 0) {
						this.applyList = res.data;
					}
				})
			},
			//获取团员列表
			getMemberList() {
				this.$http.get('api/Tmy/teaminfook', {
					page: this.page,
					limit: this.pageSize
				}).then(res => {
					if (res.code == 0) {
						res.data.forEach(e => {
							this.memberList.push(e)
						})
						if (res.data.length < this.pageSize) this.status = 'nomore';
						else this.status = 'loadmore';
					}
					uni.stopPullDownRefresh();
				})
			},
			//拉黑和释放
			laheiOreSf(item, type) { //type  1拉黑 2释放
				let url = ''
				let content = ''
				if (type == 1) {
					url = 'api/Tmy/lahei'
					content = '是否确认拉黑该成员'
				} else {
					url = 'api/Tmy/okadd'
					content = '是否确认释放该成员'
				}
				uni.showModal({
					content: content,
					success: (e) => {
						if (e.confirm) {
							this.$http.get(url, {
								id: item.id
							}).then(res => {
								if (res.code == 0) {
									this.$refs.uToast.show({
										title: res.msg,
										type: 'success',
									})
									if (type == 1) {
										item.static = '-1';
									} else {
										item.static = '1';
									}
								} else {
									this.$refs.uToast.show({
										title: res.msg,
										type: 'error',
									})
								}
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #FFF;
	}

	.infoBox {
		background: #FFFFFF;
		box-shadow: 0 0 10rpx #dddddd;
		padding: 25rpx 20rpx;

		.username {
			font-size: 32rpx;
			font-weight: 550;
		}

		.teamname {
			font-size: 26rpx;
			color: #999;
			margin-top: 25rpx;
		}
	}

	.actTitless {
		font-size: 32rpx;
		font-weight: 550;
	}

	.teamList {
		margin-top: 30rpx;
	}

	.btns {
		padding: 15rpx 35rpx;
	}

	.block {
		color: #999999;
		border: 1rpx solid #999999;
		border-radius: 10rpx;
	}

	.release {
		background-color: #FFEC3E;
		color: #666666;
	}
</style>
